<template>
    <div>
        <van-search placeholder="请输入搜索关键词" />
        <div id="focus" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="i in 5" :key="i">
                    <img src="https://via.placeholder.com/375x240" mode="cover" />
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="index-block">
            <div class="block-header">
                <div class="block-title">今日更新</div>
            </div>
            <div class="swiper-container scroll-list">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="i in 5" :key="i">
                        <div class="list-item">
                            <div class="item-thumb">
                                <img src="https://via.placeholder.com/240x320" />
                            </div>
                            <div class="item-title">123</div>
                            <div class="item-rate">
                                <van-rate v-model="value" void-icon="star" size="12" />
                                <span>{{ value }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <div class="index-block">
            <div class="block-header">
                <div class="block-title">大家都在看</div>
            </div>
            <div class="block-content">
                <van-row :gutter="16">
                    <van-col :span="8" v-for="i in 6" :key="i">
                        <div class="list-item">
                            <div class="item-thumb">
                                <img src="https://via.placeholder.com/240x320" />
                            </div>
                            <div class="item-title">123</div>
                            <div class="item-rate">
                                <van-rate v-model="value" void-icon="star" size="12" />
                                <span>{{ value }}</span>
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </div>

        <div class="index-block">
            <div class="block-header">
                <div class="block-title">每日限免</div>
            </div>
            <div class="block-content">
                <div class="list-item">
                    <div class="item-thumb horizontal">
                        <img src="https://via.placeholder.com/240x320" />
                    </div>
                    <div class="item-title large">123</div>
                    <div class="item-desc van-multi-ellipsis--l2">123213123213</div>
                </div>
            </div>
        </div>

        <div class="index-block">
            <div class="block-header">
                <div class="block-title">精品推荐</div>
            </div>
            <div class="block-content">
                <van-row :gutter="16">
                    <van-col :span="8" v-for="i in 6" :key="i">
                        <div class="list-item">
                            <div class="item-thumb">
                                <img src="https://via.placeholder.com/240x320" />
                            </div>
                            <div class="item-title">123</div>
                            <div class="item-rate">
                                <van-rate v-model="value" void-icon="star" size="12" />
                                <span>{{ value }}</span>
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </div>

        <div class="index-block">
            <div class="block-header">
                <div class="block-title">畅销排行</div>
            </div>
            <div class="swiper-container scroll-list">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="i in 5" :key="i">
                        <div class="list-item">
                            <div class="item-thumb">
                                <img src="https://via.placeholder.com/240x320" />
                            </div>
                            <div class="item-title">123</div>
                            <div class="item-rate">
                                <van-rate v-model="value" void-icon="star" size="12" />
                                <span>{{ value }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <div class="index-block">
            <div class="block-header">
                <div class="block-title">猜你喜欢</div>
            </div>
            <div class="block-content">
                <van-row :gutter="16">
                    <van-col :span="8" v-for="i in 6" :key="i">
                        <div class="list-item">
                            <div class="item-thumb">
                                <img src="https://via.placeholder.com/240x320" />
                            </div>
                            <div class="item-title">123</div>
                            <div class="item-rate">
                                <van-rate v-model="value" void-icon="star" size="12" />
                                <span>{{ value }}</span>
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </div>

    </div>
</template>

<script>
	import Swiper from "swiper";

	export default {
		components: {
		},
		data() {
			return {
				value: 3.5
			};
		},
		mounted() {
			new Swiper("#focus", {
				loop: true,
				effect: "coverflow",
				centeredSlides: true,
				coverflowEffect: {
					rotate: 15,
					stretch: 0,
					depth: 200,
					modifier: 1
				},
				pagination: {
					el: ".swiper-pagination"
				}
			});
			new Swiper(".scroll-list", {
				slidesOffsetBefore: 24,
				slidesOffsetAfter: 24,
				slidesPerView: 3,
				spaceBetween: 16
			});
		}
	};
</script>
